<template>
	<view class="page">
		<nav-header title="群介绍">
			<template v-slot:right>
				<view class="nav-edit">
					<text @click="goEdit" v-if="isOwner || isAdmin">编辑</text>
				</view>
			</template>
		</nav-header>
		<view class="top">
			<up-subsection :list="list" activeColor="#2970FF" inactiveColor="#181D27" bgColor="#ffffff"
				:current="current" @change="sectionChange"></up-subsection>
		</view>
		<view class="content">
			<view class="content1" v-if="current == 0 && group.groupIntro">
				<view class="top">
					<text class="text-sm-Regular">群聊介绍：</text>
					<view class="top-right" @tap.stop="goEdit" v-if="isOwner || isAdmin">
						<text class="text-sm-Regular">去编辑</text>
						<svg-icon icon="arrowRight" :width="32"></svg-icon>
					</view>
				</view>
				<view class="bottom">
					<text class="text-sm-Regular">
						{{ group.groupIntro }}
					</text>
				</view>
			</view>
			<view v-if="(group.groupIntro == null || group.groupIntro == '') && current == 0">
				<up-empty :icon="getResource('/icon/empty-message.svg')" text="暂无数据">
				</up-empty>
			</view>
			<view class="content2" v-if="current == 1 && imgList.length">
				<list-contacts v-if="isOwner || isAdmin" status="contact" type="confirmbar" :info="info"
					@click="expand"></list-contacts>
				<!-- <view class="header">
					<text>共{{ imgList.length }}张照片</text>
					<view>
						<text>剩余数量：{{ imgList.length }}/30</text>
						<text class="kr">扩容</text>
					</view>
				</view> -->
				<view class="pic-item">

					<view class="imgList">
						<view v-for="(item, index) in imgList" class="image-container">
							<img :src="item.picture" alt="" class="group-img" @click="previewImage(index)">
							<view class="checkbox">
								<up-checkbox-group>
									<up-checkbox v-if="showDelete" activeBackgroundColor="#2970FF" iconColor="#ffffff"
										:checked="item.checked" @change="toggleCheck(index)" />
								</up-checkbox-group>
							</view>
						</view>
					</view>
					<image-upload :onSuccess="onUnloadImageSuccess" :maxCount="9" v-if="isOwner || isAdmin">
						<view class="pic-add">
							<view class="box">
								<svg-icon icon="plus" :width="48"></svg-icon>
								<text class="text-xs-Regular">上传照片</text>
							</view>
						</view>
					</image-upload>
				</view>

				<view v-if="imgList.length && (isOwner || isAdmin)">
					<view class="imgEdit" v-if="!showDelete" @tap="changeShow">
						<view>
							<button class="plainColor">
								<text class="text-xs-Medium">批量操作</text>
							</button>
						</view>
					</view>

					<view class="imgEditDoing" v-else>
						<view style="flex: 1;">
							<view class="text-sm-Regular" style="display: flex;align-items: center;">
								<up-checkbox-group>
									<up-checkbox :checked="allChecked" activeBackgroundColor="#2970FF"
										iconColor="#ffffff" @change="selectAll"></up-checkbox>
								</up-checkbox-group>
								<text @tap.stop="selectAll">全选</text>
								<text style="color: #2970FF;">（已选择：{{ selectedImagesCount }}张）</text>
							</view>
						</view>
						<view>
							<button class="plainColor" @tap="clearSelection">
								<text class="text-xs-Medium">取消操作</text>
							</button>
						</view>
						<view>
							<button class="btnColor" @tap="confirmDelete">
								<text class="text-xs-Medium">确认删除</text>
							</button>
						</view>
					</view>
				</view>
			</view>

			<view v-if="imgList.length==0 && current == 1">
				<view v-if="isOwner||isAdmin" class="content2">
					<list-contacts v-if="isOwner || isAdmin" status="contact" type="confirmbar" :info="info"
						@click="expand"></list-contacts>
					<image-upload :onSuccess="onUnloadImageSuccess" :maxCount="9" v-if="isOwner || isAdmin">
						<view class="pic-add">
							<view class="box">
								<svg-icon icon="plus" :width="48"></svg-icon>
								<text class="text-xs-Regular">上传照片</text>
							</view>
						</view>
					</image-upload>
				</view>
				<view v-else>
					<up-empty :icon="getResource('/icon/empty-message.svg')" text="暂无数据">
					</up-empty>
				</view>
			</view>

			<view class="content1" v-if="current == 2 && group.companyId!=null && group.profile">
				<view class="top">
					<text class="text-sm-Regular">企业信息：</text>
					<view class="top-right" @tap.stop="goEdit" v-if="isOwner || isAdmin">
						<text class="text-sm-Regular">去编辑</text>
						<svg-icon icon="arrowRight" :width="32"></svg-icon>
					</view>
				</view>
				<view class="bottom">
					<text class="text-sm-Regular">
						{{ group.profile }}
					</text>
				</view>
			</view>
			<view v-if="(group.profile == null || group.profile == '') && current == 2">
				<up-empty :icon="getResource('/icon/empty-message.svg')" text="暂无数据">
				</up-empty>
			</view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: null,
				group: [],
				// list: ["群介绍", "相册", "企业信息"],
				current: 0,
				imgList: [],
				info: {},
				showDelete: false,
				selectedImages: []
			}
		},
		methods: {
			// 图片预览
			previewImage(index) {
				const img = this.imgList.map(item => item.picture); // 提取所有图片的 URL
				uni.previewImage({
					urls: img,
					current: img[index] // 设置当前显示的图片
				});
			},
			loadGroupInfo() {
				this.$http({
					url: `/group/find/${this.groupId}`,
					method: 'GET'
				}).then((group) => {
					if (group.groupIntro) {
						group.groupIntro = `简介：${group.groupIntro}`
					}
					if (group.companyId) {
						this.$http({
							url: "/company/getCompanyInfo",
							method: "POST",
							data: {
								groupId: this.groupId
							}
						}).then((company) => {
							this.group.profile = company.profile
						})
					}
					this.group = group;
				});
			},
			onUnloadImageSuccess(file, res) {
				this.$http({
					url: '/group/picture/add',
					method: "post",
					data: {
						groupId: this.groupId,
						picture: res.data.originUrl
					}
				}).then(res => {
					uni.showToast({
						title: "上传成功",
						icon: "none"
					})
					this.loadGroupAlbum()
				})
			},
			loadGroupAlbum() {
				this.$http({
					url: `/group/picture/list/${this.groupId}`,
					method: "get"
				}).then(res => {
					console.log(res)
					this.imgList = res
					this.info = {
						title: "照片已使用",
						select: this.imgList.length,
						size: 30,
						unit: "张",
						btext: "扩容照片"
					}
				})
			},
			sectionChange(index) {
				this.current = index
			},
			goEdit() {
				if (this.current == 0) {
					uni.navigateTo({
						url: `/pageSubOne/group/group-introduction-edit?id=${this.groupId}&type=qun`
					})
				}
				if (this.current == 1) {
					uni.navigateTo({
						url: `/pageSubOne/business-chat/business-album-edit?groupId=${this.groupId}`
					})
				}
				if (this.current == 2) {
					uni.navigateTo({
						url: `/pageSubOne/group/group-introduction-edit?id=${this.groupId}&type=company`
					})
				}
			},
			expand() {
				console.log("扩容")
			},
			changeShow() {
				this.showDelete = true
			},
			toggleCheck(index) {
				this.imgList[index].checked = !this.imgList[index].checked;
			},
			selectAll() {
				const allChecked = this.allChecked;
				this.imgList.forEach(img => {
					img.checked = !allChecked;
				});
			},
			clearSelection() {
				this.imgList.forEach(img => {
					img.checked = false;
				});
				this.selectedImages = [];
				this.showDelete = false
			},
			confirmDelete() {
				const selectedImages = this.imgList.filter(img => img.checked);
				if (selectedImages.length > 0) {
					uni.showModal({
						title: '是否确认删除',
						content: '是否删除选中照片，删除后无法恢复，请谨慎操作',
						success: (res) => {
							if (res.confirm) {
								let ids = selectedImages.map(img => img.id)
								this.$http({
									url: "/group/picture/remove",
									method: "POST",
									data: ids
								}).then(() => {
									uni.showToast({
										title: "删除成功",
										icon: "none"
									})
									this.imgList = this.imgList.filter(img => !selectedImages.includes(
										img));
									this.selectedImages = [];
									this.loadGroupAlbum()
									this.showDelete = false;
								});
							}
						}
					})
				} else {
					uni.showToast({
						title: "请选择要删除的图片",
						icon: "none"
					})
				}
			}
		},
		computed: {
			list() {
				if (this.group.companyId != null) {
					return ["群介绍", "相册", "企业信息"]
				} else {
					return ["群介绍", "相册"]
				}
			},
			selectedImagesCount() {
				return this.imgList.filter(img => img.checked).length;
			},
			allChecked() {
				return this.imgList.every(img => img.checked);
			},
			isOwner() {
				return this.group.ownerId == this.userStore.userInfo.id;
			},
			isAdmin() {
				if (this.group.groupAdmin) {
					return this.group.groupAdmin.includes(this.userStore.userInfo.id);
				} else {
					return false
				}
			}
		},
		onLoad(options) {
			this.groupId = options.id;
			// 查询群聊信息
			this.loadGroupInfo(options.id);
			//查询群聊相册
			this.loadGroupAlbum()
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;

		.content {
			width: 100%;
			position: relative;

			.content1 {
				display: flex;
				flex-direction: column;
				gap: 16rpx;
				margin-top: 16rpx;
				padding: 24rpx 32rpx;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: $gray-400;

					.top-right {
						display: flex;
						align-items: center;
						gap: 8rpx;
						color: $brand-500;
					}
				}

				.bottom {
					color: $gray-600;
				}
			}

			.content2 {
				padding: 32rpx;

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 30rpx;
					color: #616161;

					.kr {
						color: #d90000;
						margin-left: 20rpx;
					}
				}

				.imgEdit {
					width: 100%;
					position: fixed;
					bottom: 0;
					right: 0;
					height: 92rpx;
					padding: 10rpx 20rpx 42rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					border-top: 1rpx solid $gray-200;

					.plainColor {
						width: 160rpx;
						white-space: nowrap;
						border: 1rpx solid $brand-500;
						border-radius: 34rpx;
						color: $brand-500;
						padding: 8rpx 24rpx;
						text-align: center;
						line-height: 28rpx;
					}
				}

				.imgEditDoing {
					width: 95%;
					position: fixed;
					bottom: 0;
					left: 0;
					height: 92rpx;
					padding: 10rpx 60rpx 42rpx 20rpx;
					display: flex;
					align-items: center;
					gap: 16rpx;
					border-top: 1rpx solid $gray-200;

					.plainColor {
						width: 160rpx;
						white-space: nowrap;
						border: 1rpx solid $brand-500;
						border-radius: 34rpx;
						color: $brand-500;
						padding: 8rpx 24rpx;
						text-align: center;
						line-height: 28rpx;
					}

					.btnColor {
						width: 160rpx;
						background-color: $error-500;
						border-radius: 34rpx;
						color: $white;
						padding: 8rpx 24rpx;
						text-align: center;
						line-height: 28rpx;
					}
				}

				.pic-item {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(222rpx, 1fr));
					gap: 8rpx;
				}

				.pic-add {
					background-color: $gray-100;
					width: 222rpx;
					height: 222rpx;
					border-radius: 16rpx;
					grid-row: span 1;
					/* 确保上传按钮占据一个单元格 */

					.box {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						gap: 16rpx;
					}
				}

				.imgList {
					display: contents;
					/* 将imgList的子元素提升到父容器的grid布局中 */

					.group-img {
						/* #ifndef APP-PLUS */
						width: 100%;
						height: 222rpx;
						/* #endif */
						/* #ifdef APP-PLUS */
						width: 222rpx;
						height: 222rpx;
						/* #endif */
					}
				}

				.image-container {
					position: relative;
				}

				.checkbox {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					z-index: 1;
				}
			}

			.content3 {
				padding: 20rpx;
				font-size: 30rpx;
				color: #616161;
			}
		}

		.nav-edit {
			font-size: 30rpx;
			color: #1989FA;
		}

		.top {
			width: 100%;

			// position: absolute;
			// top: 0;
			// left: 0;
			:deep(.u-subsection__bar) {
				height: 90rpx !important;
				border-bottom: 1rpx solid $brand-500;
				border-bottom-left-radius: 0 !important;
				border-bottom-right-radius: 0 !important;
			}

			:deep(.u-subsection.u-subsection--button) {
				height: 100rpx;
			}
		}
	}
</style>